<template>
    <h2 style="text-align: center;">添加门店信息</h2>
    <table border="1" class="table table-bordered">
        <tbody>
            <tr>
                <th>门店名称</th>
                <th>
                    <input type="text" placeholder="请输入门店名称" v-model="Info.Shop_Name"/>
                </th>
            </tr>

            <tr>
                <th>门店图片</th>
                <th>
                    <img  :src="Info.Shop_Img" style="width: 100px;height: 100px;"/>
                    <input type="file" @change="UpLoads"/>
                </th>
            </tr>

            <tr>
                <th>门店地址</th>
                <th>
                    <input type="text" placeholder="请输入门店地址" v-model="Info.Shop_Adress"/>
                </th>
            </tr>

            <tr>
                <th>联系电话</th>
                <th>
                    <input type="text" placeholder="请输入联系电话"  v-model="Info.Shop_Phone"/>
                </th>
            </tr>

            <tr>
                <th>门店介绍</th>
                <th>
                    <textarea cols="20" rows="4" placeholder="请输入门店介绍" v-model="Info.Shop_Info"></textarea>
                </th>
            </tr>

            <tr>
                <th>入住须知</th>
                <th>
                    <textarea cols="20" rows="4" placeholder="请输入入住须知" v-model="Info.Shop_Guide"></textarea>
                </th>
            </tr>

            <tr>
                <th>交通信息</th>
                <th>
                    <textarea cols="20" rows="4" placeholder="请输入交通信息" v-model="Info.Shop_Traffic"></textarea>
                </th>
            </tr>

            <tr>
                <th>门店状态</th>
                <th>
                    <input type="radio" :value="true" checked  v-model="Info.Shop_State"/>营业中
                    <input type="radio" :value="false" v-model="Info.Shop_State" />休息中
                </th>
            </tr>

            <tr>
                <th colspan="2" style="text-align: center;">
                    <input type="button" value="添加门店信息" class="btn btn-success" @click="AddShops" style="margin-right: 10px;"/>
                    <a href="/ShowShop">返回列表</a>
                </th>
            </tr>
        </tbody>
    </table>
</template>




<script setup lang="ts">
    import {ref} from 'vue';
    import axios from 'axios';
    import { useRouter } from 'vue-router';


    const router=useRouter();
    //添加响应式数据
    const Info=ref({
        Shop_Name: "",
        Shop_Img: "",
        Shop_Adress: "",
        Shop_Phone: "",
        Shop_Info: "",
        Shop_Guide: "",
        Shop_Traffic: "",
        Shop_State: true,
    })

    //图片上传
    const UpLoads=(img:any)=>{
        var file=img.target.files[0];
        var fd=new FormData();
        fd.append("File",file);

        axios.post("https://localhost:44380/api/FilesUpLoads/UpLoads",fd)
        .then(res=>{
            if(res.data.Coom_Code==-1)
            {
                alert(res.data.Coom_Msg);
                return;
            }
            else if(res.data.Coom_Code==-2)
            {
                alert(res.data.Coom_Msg);
                return;
            }
            else
            {
                Info.value.Shop_Img=res.data.Comm_Path
            }
        })
    }
    //添加
    const AddShops=()=>{
        axios.post("https://localhost:44380/api/Shop/AddShop",Info.value)
        .then(res=>{
            if(res.data==-1)
            {
                alert('门店名称已存在！');
                return;
            }
            else if(res.data>0)
            {
                alert('门店信息添加成功');
                router.push("/ShowShop");
            }
            else
            {
                alert('门店信息添加失败');
            }
        })
    }
</script>   